<template>
  <laker-dialog
    v-model="visible"
    title="工作票明细"
    width="900"
    height="900"
    :show-fullscreen="true"
    :show-close="true"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <el-container>
      <el-main>
        <laker-table ref="table" :apiObj="apiObj" :params="params" size="small" height="510px" border>
          <el-table-column label="视频" width="60">
            <template #default="scope">
              <el-button
                type="primary"
                v-if="scope.row.cameras && scope.row.cameras.length === 1"
                plain
                circle
                icon="el-icon-view"
                @click="table_video(scope.row.cameras[0])"
              />
              <el-dropdown v-if="scope.row.cameras && scope.row.cameras.length > 1">
                <el-button type="primary" plain circle icon="el-icon-arrow-down" />
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item
                      v-for="(item, index) in scope.row.cameras"
                      :key="index"
                      @click="table_video(item)"
                      >{{ item.cameraName }}</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="ticketSta" width="100"></el-table-column>
          <el-table-column label="类型" prop="ticketType" width="150"></el-table-column>
          <el-table-column label="票号" prop="ticketCode" width="150"></el-table-column>
          <el-table-column label="工作票内容" prop="ticketContent" width="200"></el-table-column>
          <el-table-column label="工作负责人" prop="ticketCharge" width="100"></el-table-column>
          <el-table-column label="工作组人数" prop="ticketNumber" width="100"></el-table-column>
          <el-table-column label="工作组成员" prop="ticketTeam" width="200"></el-table-column>
          <el-table-column label="监护人" prop="ticketGuardian" width="100"></el-table-column>
          <el-table-column label="工作票地点" prop="ticketLocation" width="100"></el-table-column>
          <el-table-column label="计划开始时间" prop="ticketPlanBeg" width="150"></el-table-column>
          <el-table-column label="计划结束时间" prop="ticketPlanEnd" width="150"></el-table-column>
          <el-table-column label="终结时间" prop="ticketEnd" width="150"></el-table-column>
        </laker-table>
      </el-main>
    </el-container>
  </laker-dialog>
  <hik-camera-video v-if="dialog.video" ref="hikCameraVideo" @closed="dialog.video = false"></hik-camera-video>
</template>

<script>
import LakerDialog from '@/components/lakerDialog/index.vue'
import LakerTable from '@/components/lakerTable/index.vue'
import { dayjs } from 'element-plus'
import dprevent from '@/api/dprevent'
import isepApp from '@/api/isep'
import HikCameraVideo from '@views/isep/components/video.vue'

export default {
  name: 'OmoWorkticketDialog',
  components: { HikCameraVideo, LakerDialog, LakerTable },
  emits: ['success', 'closed'],
  data() {
    return {
      dialog: {
        raDialog: false,
        scTable: false,
        siTable: false,
        video: false
      },
      apiObj: isepApp.getWorkticketPage,
      params: { ticketSta: '待申请终结' },
      mode: 'add',
      visible: false,
      titleMap: {
        add: '选择设备类型',
        edit: '编辑人员',
        show: '查看'
      },
      elmain: 'elmain',
      today: dayjs().format('YYYY-MM-DD'),
      risk01: 0,
      dataList: [],
      dictData: {
        ticketType: [
          { value: '生产区域动土工作票', label: '生产区域动土工作票' },
          { value: '电气第一种工作票', label: '电气第一种工作票' },
          { value: '电气第二种工作票', label: '电气第二种工作票' },
          { value: '热力机械第一种工作票', label: '热力机械第一种工作票' },
          { value: '热力机械第二种工作票', label: '热力机械第二种工作票' },
          { value: '热控第一种工作票', label: '热控第一种工作票' },
          { value: '热控第二种工作票', label: '热控第二种工作票' },
          { value: '一级动火工作票', label: '一级动火工作票' },
          { value: '二级动火工作票', label: '二级动火工作票' }
        ],
        ticketSta: [
          { value: '待申请终结', label: '待申请终结' },
          { value: '已终结', label: '已终结' }
        ]
      }
    }
  },
  mounted() {
    // document.querySelector('html').classList.add('dark')
  },
  methods: {
    table_video(row) {
      this.dialog.video = true
      this.$nextTick(() => {
        this.$refs.hikCameraVideo.open('show').setData({ ip: row.ipAddress })
      })
    },
    open() {
      this.visible = true
      return this
    },
    formatDict(row, column, cellValue) {
      const dictList = this.dictData[column.property]
      let label = cellValue
      if (dictList) {
        dictList.forEach((element) => {
          if (element.value == cellValue) {
            label = element.label
          }
        })
      }
      return label
    },
    getApiData() {
      dprevent.getHdSignuser().then((res) => {
        if (res.code === 'success') {
          if (res.result) {
            this.dataList = res.result
          }
        }
      })
    },
    close() {
      this.visible = false
      return this
    },
    //表单注入数据
    setData(data) {
      console.log(data)
    }
  }
}
</script>

<style scoped lang="scss">
:deep(.el-table) {
  /* 透明度为0，不显示背景色 */
  background-color: rgba(255, 240, 240, 0);
}

/* 头部标题组件 */
:deep(.el-table th.el-table__cell) {
  /* 透明度为0，不显示背景色 */
  background-color: rgba(255, 0, 0, 0);
  /* 文字颜色 */
  color: yellowgreen;
  /* 背景图片，可以为表格头部设置背景颜色，不过如果背景是透明的，
  可以直接把父div的背景图片当做是这里的图片，只要把表格放在对应的位置就行了，
  看自己选择
  */
  /* background-image: url("https://element-plus.org/images/element-plus-logo.svg"); */
}

/* 表格行背景色 */
:deep(.el-table tr) {
  /* 透明度为0，不显示背景色 */
  background-color: rgba(255, 0, 0, 0);
  /* 文字颜色 */
  color: skyblue;
}

/* 表格底部分割线，不知道表达的是什么，注释一下这个就知道了  */
:deep(.el-table__inner-wrapper:before) {
  bottom: 0;
  height: 0px;
  left: 0;
}

/* 鼠标悬停背景色 */
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
  background-color: rgba(116, 85, 228, 0.671);
}

/* 鼠标选中背景色，行点击事件 */
:deep(.el-table__body tr.current-row > td.el-table__cell) {
  background-color: green;
}
</style>
